﻿@page "/diagram/overview"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SampleDescription>
    <p> This sample visualizes an organizational structure along with an overview for easily navigating a large organizational structure using the Overview Panel.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p> This example shows how to render the Overview Panel and how to display a preview (overall view) of the entire content of a diagram. This helps you look at the overall picture of a large diagram and also navigate (pan or zoom) to a particular position of the page. The <a target='_blank' href='https://blazor.syncfusion.com/documentation/diagram/overview/#create-overview'>SourceID</a> property can be used to map the Diagram control with Overview Panel.</p><br>
</ActionDescription>

@*Hidden:Lines*@
<style type="text/css">
    #diagram, #overview {
        display: block;
    }

    .row {
        display: block;
    }
</style>
@*End:Hidden*@
<div class="col-lg-12 control-section"style="border-right: 1px solid #D7D7D7;border-left: 1px solid #D7D7D7;">
    <SfDiagram @ref="@Diagram" ID="diagram" Height="580px" tool="@DiagramTools.ZoomPan" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefault" Layout="@LayoutValue">
        <DiagramDataSource Id="Id" ParentId="ReportingPerson" DataSource="@DataSource">
            <DiagramDataMapSettings>
                <DiagramDataMapSetting Property = "Annotations[0].Content" Field = "Name"></DiagramDataMapSetting>
                <DiagramDataMapSetting Property = "Annotations[1].Content" Field = "Designation"></DiagramDataMapSetting>
                <DiagramDataMapSetting Property = "Shape.Source" Field = "ImageUrl"></DiagramDataMapSetting>
            </DiagramDataMapSettings>
        </DiagramDataSource>
        <DiagramPageSettings>
            <DiagramFitOptions CanFit="true" Mode="FitModes.Width"></DiagramFitOptions>
        </DiagramPageSettings>
        <DiagramScrollSettings ScrollLimit="@ScrollLimit.Infinity"></DiagramScrollSettings>
        <DiagramSnapSettings Constraints="@SnapConstraints.None"></DiagramSnapSettings>
    </SfDiagram>
</div>
<div class="col-lg-4" style=" width:50%; padding:0px;right:30px;bottom:20px;border: #eeeeee;border-style: solid;box-shadow: 0px 2px 2px rgba(0,0,0,0.3); background:#f7f7f7;position:absolute">
    <div style="top:30px">
        <SfOverview Height="150px" SourceID="diagram"></SfOverview>
    </div>
</div>

@code
    {
    SfDiagram Diagram;
    DiagramLayout LayoutValue = new DiagramLayout();

    DiagramNode NodeDefaults = new DiagramNode
    {
        Height = 50,
        Width = 160,
        Shape = new DiagramShape() { Type = @Syncfusion.Blazor.Diagrams.Shapes.Image, Align = ImageAlignment.XMinYMax, Scale = Stretch.Meet },
        Style = new NodeShapeStyle() { StrokeWidth = 1, Fill = "transparent", StrokeColor = "gray" },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
            new DiagramNodeAnnotation() {
                Id = "label1", Style = new AnnotationStyle() { Fill = "none", Color = "black", Bold = true, StrokeColor = "none"} ,Offset= new NodeAnnotationOffset(){ X=0.65,Y=0.35} },
            new DiagramNodeAnnotation() {
                Id = "label2", Style = new AnnotationStyle() { Color = "black", StrokeColor = "none", FontSize = 12, Fill = "none", TextWrapping = TextWrap.Wrap
                } ,Offset= new NodeAnnotationOffset(){ X=0.675,Y=0.75} }
        }
    };

    public class OrganizationalDetails
    {
        public string Id;
        public string Name;
        public string Designation;
        public string ImageUrl;
        public string IsExpand;
        public string RatingColor;
        public string ReportingPerson;
    }

    DiagramConnector ConnectorDefault = new DiagramConnector
    {
        Type = Segments.Orthogonal,
        Style = new ConnectorShapeStyle() { StrokeColor = "gray" },
        TargetDecorator = new ConnectorTargetDecorator { Shape = DecoratorShapes.None }
    };

    public List<object> DataSource = new List<object>()
    {
        new OrganizationalDetails(){ Id = "parent", Name = "Maria Anders", Designation = "Managing Director", ImageUrl = "images/diagram/overview/image30.png", IsExpand = "true", RatingColor = "#C34444" },
        new OrganizationalDetails(){ Id = "1", Name = "Ana Trujillo", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image2.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "2", Name = "Anto Moreno", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image1.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "1" },
        new OrganizationalDetails { Id = "3", Name = "Thomas Hardy", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image3.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "2" },
        new OrganizationalDetails { Id = "4", Name = "Christina kaff", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image4.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "3" },
        new OrganizationalDetails { Id = "5", Name = "Hanna Moos", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image6.png", IsExpand = "true", RatingColor = "#D46E89", ReportingPerson = "4" },
        new OrganizationalDetails { Id = "6", Name = "Peter Citeaux", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image5.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "5" },
        new OrganizationalDetails { Id = "7", Name = "Martín Kloss", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image18.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "6" },
        new OrganizationalDetails { Id = "8", Name = "Elizabeth Mary", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image7.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "6" },
        new OrganizationalDetails { Id = "9", Name = "Victoria Ash", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image8.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "5" },
        new OrganizationalDetails { Id = "10", Name = "Francisco Yang", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image19.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "3" },
        new OrganizationalDetails { Id = "11", Name = "Yang Wang", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image21.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "12", Name = "Lino Rodri", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image9.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "11" },
        new OrganizationalDetails { Id = "13", Name = "Philip Cramer", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image23.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "24" },
        new OrganizationalDetails { Id = "14", Name = "Pedro Afonso", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image10.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "15" },
        new OrganizationalDetails { Id = "15", Name = "Elizabeth Roel", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image11.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "13" },
        new OrganizationalDetails { Id = "16", Name = "Janine Labrune", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image12.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "12" },
        new OrganizationalDetails { Id = "17", Name = "Ann Devon", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image13.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "25" },
        new OrganizationalDetails { Id = "18", Name = "Roland Mendel", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image24.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "17" },
        new OrganizationalDetails { Id = "19", Name = "Aria Cruz", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image14.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "18" },
        new OrganizationalDetails { Id = "20", Name = "Martine Rancé", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image26.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "18" },
        new OrganizationalDetails { Id = "21", Name = "Maria Larsson", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image15.png", IsExpand = "false", RatingColor = "#EBB92E", ReportingPerson = "19" },
        new OrganizationalDetails { Id = "22", Name = "Diego Roel", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image17.png", IsExpand = "false", RatingColor = "#D46E89", ReportingPerson = "21" },
        new OrganizationalDetails { Id = "23", Name = "Peter Franken", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image27.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "21" },
        new OrganizationalDetails { Id = "24", Name = "Howard Snyder", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image20.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "16" },
        new OrganizationalDetails { Id = "25", Name = "Carine Schmitt", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image22.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "26", Name = "Paolo Accorti", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image28.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "36" },
        new OrganizationalDetails { Id = "27", Name = "Eduardo Roel", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image31.png", IsExpand = "true", RatingColor = "#93B85A", ReportingPerson = "26" },
        new OrganizationalDetails { Id = "28", Name = "José Pedro ", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image25.png", IsExpand = "true", RatingColor = "#D46E89", ReportingPerson = "27" },
        new OrganizationalDetails { Id = "29", Name = "André Fonseca", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image32.png", IsExpand = "true", RatingColor = "#EBB92E", ReportingPerson = "28" },
        new OrganizationalDetails { Id = "30", Name = "Howard Snyd", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image33.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "29" },
        new OrganizationalDetails { Id = "31", Name = "Manu Pereira", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image34.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "29" },
        new OrganizationalDetails { Id = "32", Name = "Mario Pontes", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image29.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "29" },
        new OrganizationalDetails { Id = "33", Name = "Carlos Schmitt", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image30.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "29" },
        new OrganizationalDetails { Id = "34", Name = "Yoshi Latimer", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image4.png", IsExpand = "true", RatingColor = "#D46E89", ReportingPerson = "29" },
        new OrganizationalDetails { Id = "35", Name = "Patricia Kenna", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image6.png", IsExpand = "true", RatingColor = "#EBB92E", ReportingPerson = "29" },
        new OrganizationalDetails { Id = "36", Name = "Helen Bennett", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image7.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "25" },
        new OrganizationalDetails { Id = "37", Name = "Daniel Tonini", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image9.png", IsExpand = "true", RatingColor = "#93B85A", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "38", Name = "Annette Roel", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image2.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "37" },
        new OrganizationalDetails { Id = "39", Name = "Yoshi Wilson", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image8.png", IsExpand = "false", RatingColor = "#EBB92E", ReportingPerson = "38" },
        new OrganizationalDetails { Id = "40", Name = "John Steel", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image3.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "38" },
        new OrganizationalDetails { Id = "41", Name = "Renate Jose", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image9.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "40" },
        new OrganizationalDetails { Id = "42", Name = "Jaime Yorres", Designation = "SR", ImageUrl = "images/diagram/overview/image10.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "41" },
        new OrganizationalDetails { Id = "43", Name = "Carlos Nagy", Designation = "SR", ImageUrl = "images/diagram/overview/image5.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "42" },
        new OrganizationalDetails { Id = "44", Name = "Felipe Kloss", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image16.png", IsExpand = "false", RatingColor = "#EBB92E", ReportingPerson = "43" },
        new OrganizationalDetails { Id = "45", Name = "Fran Wilson", Designation = "SR", ImageUrl = "images/diagram/overview/image18.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "43" },
        new OrganizationalDetails { Id = "46", Name = "John Rovelli", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image19.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "43" },
        new OrganizationalDetails { Id = "47", Name = "Catherine Kaff", Designation = "SR", ImageUrl = "images/diagram/overview/image11.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "43" },
        new OrganizationalDetails { Id = "48", Name = "Jean Fresnière", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image21.png", IsExpand = "false", RatingColor = "#D46E89", ReportingPerson = "43" },
        new OrganizationalDetails { Id = "49", Name = "Alex Feuer", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image23.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "43" },
        new OrganizationalDetails { Id = "50", Name = "Simon Roel", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image24.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "42" },
        new OrganizationalDetails { Id = "51", Name = "Yvonne Wong", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image12.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "52" },
        new OrganizationalDetails { Id = "52", Name = "Rene Phillips", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image25.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "39" },
        new OrganizationalDetails { Id = "53", Name = "Yoshi Kenna", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image14.png", IsExpand = "false", RatingColor = "#EBB92E", ReportingPerson = "52" },
        new OrganizationalDetails { Id = "54", Name = "Helen Marie", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image15.png", IsExpand = "true", RatingColor = "#EBB92E", ReportingPerson ="52" },
        new OrganizationalDetails { Id = "55", Name = "Joseph Kaff", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image26.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "52" },
        new OrganizationalDetails { Id = "56", Name = "Georg Pipps", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image27.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "57", Name = "Nardo Batista", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image17.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "12" },
        new OrganizationalDetails { Id = "58", Name = "Lúcia Carvalho", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image20.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "59", Name = "Horst Kloss", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image28.png", IsExpand = "None", RatingColor = "#68C2DE", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "60", Name = "Sergio roel", Designation = "CSR", ImageUrl = "images/diagram/overview/image22.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "61", Name = "Paula Wilson", Designation = "CSR", ImageUrl = "images/diagram/overview/image31.png", IsExpand = "None", RatingColor = "#68C2DE", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "62", Name = "Mauri Moroni", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image25.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "63", Name = "Janete Limeira", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image29.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "64", Name = "Michael Holz", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image32.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "57" },
        new OrganizationalDetails { Id = "65", Name = "Alej Camino", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image33.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "66", Name = "Jonas Bergsen", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image34.png", IsExpand = "None", RatingColor = "#68C2DE", ReportingPerson = "65" },
        new OrganizationalDetails { Id = "67", Name = "Jose Pavarotti", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image30.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "68" },
        new OrganizationalDetails { Id = "68", Name = "Miguel Angel", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image4.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "66" },
        new OrganizationalDetails { Id = "69", Name = "Jytte Petersen", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image1.png", IsExpand = "true", RatingColor = "#68C2DE", ReportingPerson = "68" },
        new OrganizationalDetails { Id = "70", Name = "Kloss Perrier", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image2.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "72" },
        new OrganizationalDetails { Id = "71", Name = "Art Nancy", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image6.png", IsExpand = "true", RatingColor = "#D46E89", ReportingPerson = "27" },
        new OrganizationalDetails { Id = "72", Name = "Pascal Cartrain", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image3.png", IsExpand = "true", RatingColor = "#EBB92E", ReportingPerson = "65" },
        new OrganizationalDetails { Id = "73", Name = "Liz Nixon", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image7.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "68" },
        new OrganizationalDetails { Id = "74", Name = "Liu Wong", Designation = "Project Manager", ImageUrl = "images/diagram/overview/image8.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "75", Name = "Karin Josephs", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image9.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "74" },
        new OrganizationalDetails { Id = "76", Name = "Ruby Anabela ", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image10.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "75" },
        new OrganizationalDetails { Id = "77", Name = "Helvetis Nagy", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image11.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "82" },
        new OrganizationalDetails { Id = "78", Name = "Palle Ibsen", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image5.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "76" },
        new OrganizationalDetails { Id = "79", Name = "Mary Saveley", Designation = "SR", ImageUrl = "images/diagram/overview/image12.png", IsExpand = "false", RatingColor = "#93B85A", ReportingPerson = "82" },
        new OrganizationalDetails { Id = "80", Name = "Paul Henriot", Designation = "SR", ImageUrl = "images/diagram/overview/image16.png", IsExpand = "false", RatingColor = "#D46E89", ReportingPerson = "79" },
        new OrganizationalDetails { Id = "81", Name = "Rita Müller", Designation = "SR", ImageUrl = "images/diagram/overview/image13.png", IsExpand = "None", RatingColor = "#68C2DE", ReportingPerson = "79" },
        new OrganizationalDetails { Id = "82", Name = "Pirkko King", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image18.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "78" },
        new OrganizationalDetails { Id = "83", Name = "Paula Parente", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image19.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "75" },
        new OrganizationalDetails { Id = "84", Name = "Karl Jablonski", Designation = "S/w Engg", ImageUrl = "images/diagram/overview/image14.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "83" },
        new OrganizationalDetails { Id = "34", Name = "Matti Kenna", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image15.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "84" },
        new OrganizationalDetails { Id = "35", Name = "Zbyszek Yang", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image21.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "84" },
        new OrganizationalDetails { Id = "85", Name = "Nancy", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image17.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "74" },
        new OrganizationalDetails { Id = "86", Name = "Robert King", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image23.png", IsExpand = "true", RatingColor = "#D46E89", ReportingPerson = "85" },
        new OrganizationalDetails { Id = "87", Name = "Laura Callahan", Designation = "CSR", ImageUrl = "images/diagram/overview/image20.png", IsExpand = "false", RatingColor = "#D46E89", ReportingPerson = "88" },
        new OrganizationalDetails { Id = "88", Name = "Anne", Designation = "CSR", ImageUrl = "images/diagram/overview/image24.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "86" },
        new OrganizationalDetails { Id = "89", Name = "Georg Pipps", Designation = "Senior S/w Engg", ImageUrl = "images/diagram/overview/image26.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "parent" },
        new OrganizationalDetails { Id = "30", Name = "Isabel Castro", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image27.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "89" },
        new OrganizationalDetails { Id = "34", Name = "Nardo Batista", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image28.png", IsExpand = "None", RatingColor = "#EBB92E", ReportingPerson = "88" },
        new OrganizationalDetails { Id = "90", Name = "Rene Phillips", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image22.png", IsExpand = "false", RatingColor = "#68C2DE", ReportingPerson = "89" },
        new OrganizationalDetails { Id = "91", Name = "Lúcia Carvalho", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image25.png", IsExpand = "None", RatingColor = "#93B85A", ReportingPerson = "89" },
        new OrganizationalDetails { Id = "92", Name = "Horst Kloss", Designation = "Project Trainee", ImageUrl = "images/diagram/overview/image29.png", IsExpand = "None", RatingColor = "#D46E89", ReportingPerson = "89" },
        new OrganizationalDetails { Id = "93", Name = "Simon Roel", Designation = "Project Lead", ImageUrl = "images/diagram/overview/image28.png", IsExpand = "true", RatingColor = "#93B85A", ReportingPerson = "98" }
    };

    protected override void OnInitialized()
    {
        LayoutValue = new DiagramLayout()
        {
            Type = LayoutType.OrganizationalChart,
            Margin = new LayoutMargin() { Top = 20 }
        };
    }
}
